import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:vdrag_saas/Utils.dart';

class Tag extends StatefulWidget {
  GlobalKey<TagState> uKey;
  bool selected = false;
  String name = "";  
  bool visible = true;
  final Function(Tag tag) onChange;
  Tag(this.name, {required this.onChange, required this.uKey}): super(key: uKey);
  @override
  State<Tag> createState() => TagState();
  
}

class TagState extends State<Tag> {
  bool isMobile = false;
  Color color = Colors.white;
  Color bgColor = Colors.black;
  double fontSize = 14;
  double padding = 18;
  void onSelect() {
    setState(() {
      widget.selected = !widget.selected;
      if (widget.selected) {
        padding = 18 - fontSize / 2;
      } else {
        padding = 18;
      }
      widget.onChange(widget);
      setColor();
    });
  }

  void setColor() {
    if (widget.selected) {
      if (isMobile) {
        color = Colors.white;
      } else {
        color = Colors.white;
      }
      bgColor = isMobile ? const Color(0xff216EFF) : const Color(0xff409EFF);
    } else {
      bgColor = isMobile ? const Color(0xffE2E2E2) : const Color(0xffECF5FF);
      if (isMobile) {
        color = const Color(0xff666666);
      } else {
        color = const Color(0xff409EFF);
      }
    }
  }
  void reset() {
    setState(() {
      widget.selected = false;
      widget.visible = true;
    });
  }
  void show() {
    setState(() {
      widget.visible = true;
    });
  }
  void hidden() {
    setState(() {
      widget.visible = false;
    });
  }
  void onHover(bool isHover) {
    if (isMobile) {
      return;
    }
    if (isHover) {
        color = Colors.white;
      } else {
        color = const Color(0xff409EFF);
      }
    setState(() {
      
    });
  }

  @override
  Widget build(BuildContext context) {
    isMobile = Utils.isMobile(context);
    fontSize = isMobile ? 12 : 14;
    double height = isMobile ? 24 : 28;
    double padding_v = isMobile ? 6: 12;
    BorderSide borderSide = BorderSide.none;
    if (!isMobile) {
      borderSide = const BorderSide(color: Color(0xffB3D8EE), width: 1);
    }
    setColor();
    if (widget.visible == false) {
      return Container();
    }
    return Container(
      padding: const EdgeInsetsDirectional.only(end: 6),
      child: Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            ElevatedButton(
                onHover: onHover,
                style: ButtonStyle(                  
                  // overlayColor: isMobile || widget.selected ? null : const MaterialStatePropertyAll(Color(0xffCDE4FF)),
                  elevation: const MaterialStatePropertyAll(0),
                  minimumSize: MaterialStatePropertyAll(Size(50, height)),
                  padding: MaterialStateProperty.all(EdgeInsetsDirectional.only(
                      top: padding_v, bottom: padding_v + 1, start: padding, end: padding)),
                  backgroundColor: MaterialStateProperty.all(bgColor),                    
                  shape: MaterialStateProperty.all(RoundedRectangleBorder(
                      side: borderSide,
                      borderRadius: BorderRadius.circular(150)))),
                onPressed: onSelect,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(widget.name,
                        style: TextStyle(
                          fontFamily: '思源黑体',
                          fontSize: fontSize,
                          color: color,
                        )),
                    // SizedBox(width: 16 - fontSize),
                    Visibility(
                      visible: widget.selected,
                      child: Icon(
                        Icons.close,
                        color: color,
                        size: fontSize,
                      ),
                    )
                  ],
                )),
          ]),
    );
  }
}
